<style lang="less" xmlns="http://www.w3.org/1999/html">
  @import '../../styles/common.less';
</style>

<template>
  <div style="padding-top: 20px;">
    <Form ref="projectData" :model="projectData" :rules="ruleValidate" :label-width="110">
      <div class="ivu-row" style="border-bottom: 1px #ccc solid; margin-bottom: 20px;">
      <div style="float:left;width: 30%; padding-right: 20px;border-right: 1px #ccc solid">
        <FormItem label="课程名称：" prop="name">
          <Input v-model="projectData.name" placeholder="请输入课程名称"></Input>
        </FormItem>
        <FormItem label="课程分类：" prop="type">
          <Select v-model="projectData.type" style="width:200px">
            <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="课程属性：" prop="desc">
          <Select v-model="projectData.desc" style="width:200px">
            <Option v-for="item in descList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="授课地点：" prop="address">
          <Input v-model="projectData.address" placeholder="请输入授课地点"></Input>
        </FormItem>
        <FormItem label="课程时间：">
          <DatePicker type="datetime" placeholder="请选择时间" format="yyyy-MM-dd HH:mm:ss" :start-date="new Date()" v-model="projectData.startTime" style="width: 200px"></DatePicker>
        </FormItem>
        <!--<FormItem label="课程培训人数：">-->
          <!--<Input v-model="projectData.totalPersons" placeholder="请输入课程培训人数"></Input>-->
        <!--</FormItem>-->
      </div>
      <div style="float:left;width: 30%; padding-right: 20px; padding-left:20px;border-right: 1px #ccc solid">
        <FormItem label="招生对象">
          <Input v-model="projectData.projectObj" placeholder="请输入招生对象"></Input>
        </FormItem>
        <FormItem label="报名条件：">
          <Input v-model="projectData.enrollCondition" placeholder="请输入报名条件"></Input>
        </FormItem>
        <FormItem label="招生人数：">
          <Input v-model="projectData.enrollPersons" placeholder="请输入招生人数"></Input>
        </FormItem>
        <FormItem label="报名方法：">
          <Input v-model="projectData.enrollMethod" placeholder="请输入报名方法"></Input>
        </FormItem>
        <FormItem label="教学安排：">
          <Input v-model="projectData.projectArrange" placeholder="请输入教学安排"></Input>
        </FormItem>
        <FormItem label="学费标准：">
          <Input v-model="projectData.projectFee" placeholder="请输入学费标准"></Input>
        </FormItem>
      </div>
      <div style="float:left;width: 30%; padding-left: 20px;">
        <FormItem label="证书颁发：">
          <Input v-model="projectData.certificate" placeholder="请输入证书颁发"></Input>
        </FormItem>
        <FormItem label="附件1" prop="files">
          <Row type="flex" justify="center" align="middle" class="height-100">
            <Upload
                    action="/school/fileUpload/"
                    :on-format-error="handleFormatError" :on-success="handleSuccess" :on-remove="handleRemove">
              <span>选择文件上传&nbsp;&nbsp;</span>
              <Button type="ghost" icon="ios-cloud-upload-outline">上传文件</Button>
            </Upload>
          </Row>
        </FormItem>
        <FormItem label="附件2" prop="files">
          <Row type="flex" justify="center" align="middle" class="height-100">
            <Upload
                    action="/school/fileUpload/"
                    :on-format-error="handleFormatError1" :on-success="handleSuccess1" :on-remove="handleRemove1">
              <span>选择文件上传&nbsp;&nbsp;</span>
              <Button type="ghost" icon="ios-cloud-upload-outline">上传文件</Button>
            </Upload>
          </Row>
        </FormItem>
        <FormItem label="课程时长：">
          <RadioGroup v-model="projectData.timeType">
            <Radio label="长期"></Radio>
            <Radio label="短期"></Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="课程开启状态：">
          <RadioGroup v-model="projectData.state">
            <Radio label="开启"></Radio>
            <Radio label="关闭"></Radio>
          </RadioGroup>
        </FormItem>
      </div>
      </div>
      <!--<FormItem label="项目类型简介">-->
        <!--<Input v-model="projectData.simpDesc" placeholder="请输入项目类型简介"></Input>-->
      <!--</FormItem>-->
      <!--<FormItem label="核心价值">-->
        <!--<Input v-model="projectData.mainPrice" placeholder="请输入核心价值"></Input>-->
      <!--</FormItem>-->
      <!--<FormItem label="课程设置简介">-->
        <!--<Input v-model="projectData.projectSetDesc" placeholder="请输入课程设置简介"></Input>-->
      <!--</FormItem>-->


      <FormItem label="课程描述：">
        <UE :defaultMsg=defaultMsg :config=config :id=ue1 ref="ue"></UE>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="handleSubmit('projectData')">提交</Button>
        <Button type="ghost" @click="handleReset('projectData')">清空</Button>
      </FormItem>

    </Form>
  </div>
</template>

<script>
    import moment from 'moment'
    import UE from '../ue/ue.vue';

    export default {
      components: {UE},
      name: "subjectmod",
        data(){
          return{
            projectData:{
              name:'',
              type:'',
              desc:'',
              address:'',
              file1:'',
              file2:'',
              timeType:'长期',
              startTime:new Date(),
              totalPersons:0,
              state:'开启',
              content:'',
              simpDesc:'',
              mainPrice:'',
              projectSetDesc:'',
              projectObj:'',
              enrollCondition:'',
              enrollPersons:'',
              enrollMethod:'',
              projectArrange:'',
              projectFee:'',
              certificate:'',
              id:0

            },
            ruleValidate:{
              name:[
                {required: true,message:'请输入课程名称',trigger:'blur'}
              ],
              type:[
                {required: true,message:'请输入课程分类',trigger:'blur'}
              ],
              desc:[
                {required: true,message:'请输入课程属性',trigger:'blur'}
              ]
            },
            typeList:[
              {
                value:'金融综合课程',
                label:'金融综合课程'
              },{
                value:'量化金融课程',
                label:'量化金融课程'
              },{
                value:'资本管理课程',
                label:'资本管理课程'
              },{
                value:'海外游学项目',
                label:'海外游学项目'
              },
            ],
            descList:[
              {
                value:'公开',
                label:'公开'
              },{
                value:'定制',
                label:'定制'
              }
            ],
            defaultMsg: '',
            config: {
              initialFrameWidth: null,
              initialFrameHeight: 350
            },
            ue1: "ue1", // 不同编辑器必须不同的id
          }
        },
        methods:{
          handleSubmit(name){
            this.$refs[name].validate((valid) => {
              if (valid) {
                let dataArr = {
                  projectName:this.projectData.name,
                  projectType:this.projectData.type,
                  projectDesc:this.projectData.desc,
                  projectAddress:this.projectData.address,
                  projectStartTime:moment(this.projectData.startTime).format('YYYY-MM-DD HH:mm:ss'),
                  projectTotalPersons:this.projectData.totalPersons,
                  state:this.projectData.state == '开启' ? 1 : 0,
                  projectFile1:this.projectData.file1,
                  projectFile2:this.projectData.file2,
                  timeType:this.projectData.timeType,
                  content:this.$refs.ue.getUEContent(),
                  simpDesc:this.projectData.simpDesc,
                  mainPrice:this.projectData.mainPrice,
                  projectSetDesc:this.projectData.projectSetDesc,
                  projectObj:this.projectData.projectObj,
                  enrollCondition:this.projectData.enrollCondition,
                  enrollPersons:this.projectData.enrollPersons,
                  enrollMethod:this.projectData.enrollMethod,
                  projectArrange:this.projectData.projectArrange,
                  projectFee:this.projectData.projectFee,
                  certificate:this.projectData.certificate,
                  id:this.projectData.id
                };

                console.log(dataArr);
                if(this.projectData.id > 0){
                  this.$http.post('/school/updProd',dataArr).then(res =>{
                    console.log(res);
                    this.$Message.success('更新成功!');
                    this.handleReset(name);
                  });
                }else {
                  this.$http.post('/school/addProject',dataArr).then(res =>{
                    console.log(res);
                    this.$Message.success('更新成功!');
                    this.handleReset(name);
                  });
                }
              }
            })
          },
          handleFormatError (file) {
            this.$Notice.warning({
              title: '文件格式不正确',
              desc: '文件 ' + file.name + ' 格式不正确，请选择文件。'
            });
          },
          handleSuccess(response, file, fileList){
            console.log(response);
            this.projectData.file1 = response.data[0];
          },
          handleRemove(file, fileList){
            this.projectData.file1 = '';
          },
          handleFormatError1 (file) {
            this.$Notice.warning({
              title: '文件格式不正确',
              desc: '文件 ' + file.name + ' 格式不正确，请选择文件。'
            });
          },
          handleSuccess1(response, file, fileList){
            console.log(response);
            this.projectData.file2 = response.data[0];
          },
          handleRemove1(file, fileList){
            this.projectData.file2 = '';
          },
          handleReset (name) {
            this.$refs[name].resetFields();
          }
        },
      mounted () {
        console.log(this.$route.query.id);
        if(this.$route.query.id == undefined) return;
        this.$http.get('/school/getProById?id='+this.$route.query.id).then(res=>{
          console.log(res);
          var dt = res.data.data;
          this.projectData.name = dt.projectName;
          this.projectData.type = dt.projectType;
          this.projectData.desc = dt.projectDesc;
          this.projectData.address = dt.projectAddress;
          this.projectData.file1 = dt.projectFile1;
          this.projectData.file2 = dt.projectFile2;
          this.projectData.timeType = dt.timeType;
          this.projectData.startTime = moment(dt.projectStartTime).format('YYYY-MM-DD HH:mm:ss');
          this.projectData.totalPersons = dt.projectTotalPersons;
          this.projectData.state = dt.state == '1' ? '开启' : '关闭';
          this.projectData.content = dt.content;
          this.projectData.simpDesc = dt.simpDesc;
          this.projectData.mainPrice = dt.mainPrice;
          this.projectData.projectSetDesc = dt.projectSetDesc;
          this.projectData.projectObj = dt.projectObj;
          this.projectData.enrollCondition = dt.enrollCondition;
          this.projectData.enrollPersons = dt.enrollPersons;
          this.projectData.enrollMethod = dt.enrollMethod;
          this.projectData.projectArrange = dt.projectArrange;
          this.projectData.projectFee = dt.projectFee;
          this.projectData.certificate = dt.certificate;
          this.projectData.id = dt.id;

          this.$refs.ue.setUEContent(dt.content)
        });
      },
      created () {

      }
    }
</script>

<style scoped>
  .ql-container{height: 200px !important;}
</style>
